<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/js/template-web.js"></script>
</head>

<body>

    <div class="layui-container">
        <table class="layui-table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>头像</th>
                    <th>班级</th>
                </tr>
            </thead>

            <!-- 定义容器 -->
            <tbody>

            </tbody>
        </table>

        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input type="text" name="link" required lay-verify="required" placeholder="请输入电话"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
           
           
            <div class="layui-form-item">
                <label class="layui-form-label">班级</label>
                <div class="layui-input-block">

                    <!-- 定义一个容器 -->
                    <select name="className" lay-verify="required">
                        
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <input type="file" name="title" required lay-verify="required" 
                        autocomplete="off" class="layui-input">
                </div>
            </div>
          
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" type="button" lay-filter="formDemo" onclick="sendData()">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>




    </div>
    <!--定义模板 -->
    <script type="text/html" id="demo">
        {{ each stus value index  }}
            <tr>
                <td>{{ value.id }}</td>
                <td>{{ value.name }}</td>
                <td>{{ value.link }}</td>
                <td><img src="/upload/{{ value.img }}" alt=""></td>
                <td>{{ value.cname }}</td>
            </tr>

        {{ /each }}
    </script>

    <!-- 定义模板 -->
    <script  type="text/html" id="demo2">
        {{ each classArr value index}}
            <option value="{{ value.id }}">{{ value.name }}</option>
        {{ /each }}
    </script>

    <script>
        layui.use('form', function () {
            form = layui.form;

            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
        function showData() {
            let xhr = new XMLHttpRequest();
            let tb = document.querySelector("tbody");
            xhr.open("get", "/showStu");
            xhr.onload = function () {
                let stus = JSON.parse(xhr.responseText);//数组
                let str = template("demo", { stus });
                tb.innerHTML = str;
            };
            xhr.send();
        }
        showData();

        function showClass(){
            let xhr = new XMLHttpRequest();
            let cs = document.querySelector("select[name='className']");
            xhr.open("get", "/showClass");
            xhr.onload = function () {
                let classArr = JSON.parse(xhr.responseText);//数组
                console.log(classArr)
                let str = template("demo2", { classArr });
                cs.innerHTML = str;
                form.render('select');
            };
            xhr.send();
        }
        showClass();

        function sendData(){
            let xhr = new XMLHttpRequest();
            let fd=new FormData();
            //获取表单元素的值
            let name=document.querySelector("input[name='name']").value;
            let link=document.querySelector("input[name='link']").value;
            let cid=document.querySelector("select[name='className']").value;//selectDom.value获取当前选中项的值
            let file=document.querySelector("input[type='file']").files[0];
            fd.append("name",name);
            fd.append("link",link);
            fd.append("cid",cid);
            fd.append("img",file);

            xhr.open("post", "/uploadFile");
            xhr.onload = function () {
                showData();
            };
            xhr.send(fd);
        }
    </script>
</body>

</html>